<template>
  <div class="user-header">
    <div class="avatar-container">
      <van-image
          :src="user?.avatar?toFileUrl(user?.avatar):defaultAvatar"
          round
          fit="cover"
          class="avatar"
      />
    </div>
    <div class="info-container">
      <h1 class="name">
        {{ user?.nickname || user?.name || user?.username }}
        <van-tag :type="userTypeTag?.type as any" class="user-tag">
          {{ userTypeTag?.text }}
        </van-tag>
      </h1>
      <p class="intro">{{ user?.introduction || '这个人很懒，什么都没留下~' }}</p>
    </div>
    <div class="action-container">
      <van-button
          icon="edit"
          size="small"
          plain
          round
          class="edit-btn"
          @click="handleEdit"
      >
        编辑资料
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import {useRouter} from 'vue-router'
import type {API} from "@/type/type";
import defaultAvatar from '@/assets/images/avatar.jpg'
import {toFileUrl} from "@/api/system/file";

const props = defineProps<{
  user: Partial<API.ICurrentUser> | null
}>()

const router = useRouter()

const userTypeTag = computed(() => {
  switch (props.user?.type) {
    case 1:
      return {type: 'primary', text: '学员'}
    case 2:
      return {type: 'success', text: '教练'}
    case 3:
      return {type: 'danger', text: '管理员'}
    default:
      return {type: 'primary', text: '用户'}
  }
})

const handleEdit = () => {
  router.push('/personal/edit')
}
</script>

<style scoped lang="less">
.user-header {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 20px 16px;
  color: white;

  .avatar-container {
    .avatar {
      width: 72px;
      height: 72px;
      border: 3px solid rgba(255, 255, 255, 0.3);
    }
  }

  .info-container {
    margin-left: 16px;
    flex: 1;

    .name {
      font-size: 20px;
      font-weight: 600;
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 8px;
      color: white;
    }

    .user-tag {
      transform: translateY(-1px);
    }

    .intro {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }
  }

  .action-container {
    align-self: flex-start;

    .edit-btn {
      color: white;
      border-color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.1);

      &:active {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
</style>
